<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工管理</title>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/black/easyui.css"/>
<link rel="stylesheet" type="text/css" href="css/taojin/layout.css"> 
</head>
<body>
<script type="text/javascript">
//添加按钮
function empButtons(value,row,index){
		//编辑员工,删除员工,员工角色,添加角色
	var editEmp="",deleteEmp="",empRoles="",empEditRole="",editJob="";
	 editEmp = "<a class='cell_button' onclick='editEmp("+row.empId+")' style='margin-left:5px;padding:0 3px;'>编辑</a>";
	 empRoles = "<a class='cell_button' onclick = 'empRoles("+row.empId+")' style='margin-left:5px;padding:0 3px;'>查看角色</a>";
	 empEditRole = "<a class='cell_button' onclick = 'empEditRole("+row.empId+")' style='margin-left:5px;padding:0 3px;'>编辑角色</a>";
	 editJob = "<a class='cell_button' onclick = 'editJob("+row.empId+")' style='margin-left:5px;padding:0 3px;'>职位调动</a>";
	 deleteEmp = "<a class='cell_button' onclick = 'deleteEmp("+row.empId+")' style='margin-left:5px;padding:0 3px;'>删除</a>";
	 return editEmp+empRoles+empEditRole+editJob+deleteEmp;
}

	//查看角色
	function empRoles(empId){
		$("#emp-roles-dg").datagrid({
			url:'getEmpRoles',
			method:'post',
			singleSelect:true,
			columns:[[
				{field:'rId',title:'角色编号',width:1,align:'center'},
				{field:'rName',title:'角色名称',width:1,align:'center'},
				]],
			queryParams:{
				empId:empId
			}
		});
		$("#emp-roles-dialog").dialog('open');
	}
	//编辑角色
	function empEditRole(empId){
		$("#emp-roles-datalist").datalist({
			url:'getAllRoles',
			checkbox:true,
			lines:true,
			textField:'rName',
			valueField:'rId',
			border:false,
			fit:true,
			singleSelect:false,
			onLoadSuccess:function(){
				$.getJSON("getEmpRoles",{empId:empId},function(data){
					if (data != null) {
						var rows = $("#emp-roles-datalist").datalist('getRows');
						for (var i = 0; i < data.length; i++) {
							for (var j = 0; j< rows.length; j++) {
								 if (data[i].rId == rows[j].rId) {
									$("#emp-roles-datalist").datalist('checkRow',j);
								} 
							}
						}
						
					}
				})
			} 
		});
		$("#emp-editRoles-dialog").dialog({
			EmpId : empId
		});
		$("#emp-editRoles-dialog").dialog('open');
	}
	//编辑员工
	function editEmp(empId){
		$("#emp-add-dialog").dialog({
				title : '编辑员工',
				href2 : 'editEmp',
				EmpId : empId
			});
			$("#emp-add-dialog").dialog('open');
			$("#emp-form").form('load', 'getEmpFormById?empId=' + empId);
		}

	//职位调动
	function editJob(empId){
		$("#emp-editJob-dialog").dialog({
			empId:empId
		});
		
		$("#emp-editJob-dialog").dialog('open');
	}
	
	
	//删除员工
	function deleteEmp(empId) {
		$.messager.confirm('提示', '确定要删除该员工吗?', function(data) {
			if (data) {
				$.getJSON("deleteEmp", {
					empId : empId
				}, function(data) {
					if (data == true) {
						$("#emp-dg").datagrid('reload');
					} else {
						$.messager.alert('提示', "删除失败!");
					}
				});
			}
		})
	}

	//导入datagrid表格
	$(function() {

		$.extend($.fn.validatebox.defaults.rules, {
			username : {
				validator : function(value, param) {
					return value.length >= param[0] && value.length <= param[1]
				},
				message : '用户名必须大于{0}小于{1}'
			},
			passowrd : {
				validator : function(value, param) {
					return value.length >= param[0] && value.length <= param[1]
				},
				message : '密码必须大于{0}小于{1}'
			},
			telephone : {
				validator : function(value, param) {
					var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
					return reg.test(value);
				},
				message : '手机号码格式不正确'
			},
			age : {
				validator : function(value, param) {
					return value >= param[0] && value <= param[1]
				},
				message : '年龄必须在{0}和{1}之间'
			},
			empty : {
				validator : function(value, param) {
					return value.length > 0
				},
				message : '该项不能为空'
			}

		});
		
		$("#emp-dg").datagrid({
			url : 'getEmps',
			method : 'post',
			singleSelect : true,
			columns: [ [ {
				field : 'empId',
				title : '编号',
				width : 1,
				align : 'center'
			}, {
				field : 'empName',
				title : '姓名',
				width : 1,
				align : 'center'
			}, {
				field : 'empAge',
				title : '年龄',
				width : 1,
				align : 'center'
			}, {
				field : 'empSex',
				title : '性别',
				width : 1,
				align : 'center'
			}, {
				field : 'empJob',
				title : '职位',
				width : 1,
				align : 'center'
			}, {
				field : 'deptName',
				title : '部门',
				width : 1,
				align : 'center'
			},{
				field : 'empStatus',
				title : '状态',
				width : 1,
				align : 'center'
			}, {
				field : 'empUsername',
				title : '账号',
				width : 1.2,
				align : 'center'
			}, {
				field : 'empPassword',
				title : '密码',
				width : 1.2,
				align : 'center'
			}, {
				field : 'empEmail',
				title : '邮箱',
				width : 1.2,
				align : 'center'
			}, {
				field : 'empQQ',
				title : 'QQ',
				width : 1,
				align : 'center'
			}, {
				field : 'empTel',
				title : '电话',
				width : 1.2,
				align : 'center'
			}, {
				field : 'operate',
				title : '操作',
				width : 3,
				formatter : empButtons
			}]],
			onLoadSuccess : function(data) {
				$(".cell_button").linkbutton({});
				$('#emp-dg').datagrid('fixRowHeight');
			},
			rowStyler : function(index, row) {
				return 'height:32px';
			}});

		//添加员工
		$("#emp-add").linkbutton({
			onClick : function() {
				$("#emp-add-dialog").dialog({
					title : '添加员工',
					href2 : 'addEmp'
				});
				$("#emp-form").form('clear');
				$("#emp-add-dialog").dialog('open');
			}
		});

		//刷新员工
		$("emp-refresh").linkbutton({
			onClick : function() {
				$("#emp-dg").datagrid('reload');
			}
		});
	})
</script>

	<div class="easyui-layout" id="emp-layout" data-options="fit:true,border:false">
		<div data-options="region:'center',border:false" style="overflow:hidden;">
			<table id="emp-dg" class="easyui-datagrid" 
				data-options="fit:true,fitColumns:true,toolbar:'#emp-dg-toolbar',pagination:true,rownumbers:true,rownumberWidth:30,
				border:false,scrollbarSize :0">
			
			</table>
			<div id="emp-dg-toolbar" >
				<a id="emp-add" class="easyui-linkbutton" href="#" data-options=""	>添加员工</a>
				<a id="emp-refresh" class="easyui-linkbutton" href="#" data-options="">刷新</a>
			</div>
		</div>
		<div data-options="region:'south',border:false" style="height: 50px;"></div>
	</div>
	<div id="emp-add-dialog" class="easyui-dialog" title="添加员工"
		style="height: 600px; width: 400px;"
		data-options="
			resizable:true,modal:true,closed:true,buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					$('#emp-form').form({
						url:$('#emp-add-dialog').dialog('options').href2,
						onSubmit:function(param){
							param.empStatus='在职';
							return $(this).form('validate');
						},
						success:function(data){
							if(data == 'true'){
								$('#emp-dg').datagrid('reload');
								$('#emp-add-dialog').dialog('close');
							}else{
								$.messager.alert('警告','添加失败!');
							}
				
						}
					}).submit();
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#emp-add-dialog').dialog('close');
				}
			}]
		">
		<form id="emp-form" method="post">
			<div>
				<input  name="empId" type="hidden">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empName" name="empName" class="easyui-textbox" style="height: 30px; width: 150px;font-size: 18px;"
					data-options="label:'姓名:',labelWidth:45,required:true, validType:'empty'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empAge" name="empAge" class="easyui-textbox" style="height: 30px; width: 100px;"
					data-options="label:'年龄:',labelWidth:45,required:true, validType:'age[1,100]'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<select id="empSex" name="empSex" class="easyui-combobox" style="height: 30px;width: 100px;"
				data-options="label:'性别:',labelWidth:45,panelHeight:'auto',editable:false">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<select id="deptId" name="deptId" class="easyui-combobox" style="height: 30px;width: 150px;"
				data-options="label:'部门:',labelWidth:45,panelHeight:'auto',editable:false,
					valueField:'deptId',
					textField:'deptName',
					url:'getDeptList'
				">
				</select>
			</div>
			
			<div style="margin-left: 50px; margin-top: 20px;">
				<select id="empJob" name="empJob" class="easyui-combobox" style="height: 30px;width: 140px;"
				data-options="label:'职位:',labelWidth:45,panelHeight:'auto',editable:false">
					<option value="普通员工">普通员工</option>
					<option value="助理">助理</option>
					<option value="主管">主管</option>
				</select>
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empUsername" name="empUsername" class="easyui-textbox" style="height: 30px; width: 200px;"
					data-options="label:'账号:',labelWidth:45,required:true, validType:'username[5,20]'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empPassword" name="empPassword" class="easyui-textbox" style="height: 30px; width: 200px;"
					data-options="label:'密码:',labelWidth:45,required:true, validType:'password[5,18]'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empEmail" name="empEmail" class="easyui-textbox" style="height: 30px; width: 220px;"
					data-options="label:'邮箱:',labelWidth:45,validType:'email'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empTel" name="empTel" class="easyui-textbox" style="height: 30px; width: 220px;"
					data-options="label:'电话:',labelWidth:45,validType:'telephone'">
			</div>
			<div style="margin-left: 50px; margin-top: 20px;">
				<input id="empQq" name="empQq" class="easyui-textbox" style="height: 30px; width: 220px;"
					data-options="label:'QQ',labelWidth:45">
			</div>
		</form>
	</div>
	
	<div id="emp-roles-dialog" class="easyui-dialog" style="height: 400px;width: 500px;"
		data-options="resizable:true,title:'查看角色',closed:true,modal:true,buttons:[{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#emp-roles-dialog').dialog('close');
				}
			}]">
				<table id="emp-roles-dg" class="easyui-datagrid"
					data-options="fit:true,border:false,fitColumns:true,rownumbers:true,rownumberWidth:30,scrollbarSize :0">
			
				</table>
			</div>

	<div id="emp-editRoles-dialog" class="easyui-dialog" style="height: 300px;width: 400px;"
		data-options="
			resizable:true,modal:true,closed:true,title:'编辑角色',buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					var roles = $('#emp-roles-datalist').datalist('getChecked');
					//获取所有选中的功能id
					var rolesId = [];
					for(var i = 0; i < roles.length; i ++){
							rolesId.push(roles[i].rId);
					}
					var id = $('#emp-editRoles-dialog').dialog('options').EmpId;
					$.post('addEmpRoles',{rolesId:rolesId,empId:id},function(data){
						if(data == 'true'){
								$.messager.alert('提示','保存成功!');
								$('#emp-editRoles-dialog').dialog('close');
							}else{
								$.messager.alert('警告','添加失败!');
							}
						
					});
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#emp-editRoles-dialog').dialog('close');
				}
			}]">
					<div id="emp-roles-datalist"></div>
			
			</div>
			
			
		<div id="emp-editJob-dialog" class="easyui-dialog" style="height: 150px;width: 200px;padding: 20px 10px;"
			data-options="
			resizable:true,modal:true,title:'职位调动',closed:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					$('#editJob-form').form({
						url:'empEditJob',
						onSubmit:function(param){
							param.empId=$('#emp-editJob-dialog').dialog('options').empId;
						},
						success:function(data){
							if(data == 'true'){
									$.messager.alert('提示','调动成功!');
									$('#emp-dg').datagrid('reload');
									$('#emp-editJob-dialog').dialog('close');
								}else{
									$.messager.alert('警告','调动失败!');
							}
						}
					}).submit();
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#emp-editJob-dialog').dialog('close');
				}
			}]">
		<form id="editJob-form"method="post">
			<select id="empJob" name="empJob" class="easyui-combobox" style="height: 30px;width: 140px;"
				data-options="label:'职位:',labelWidth:45,panelHeight:'auto',editable:false">
					<option value="普通员工">普通员工</option>
					<option value="助理">助理</option>
					<option value="主管">主管</option>
				</select>
		</form>
		</div>
</body>
</html>